<template>
	<view class="container">
		<view class="page-body">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'">
				<view class="nav-left-item" @click="categoryClickMain(item,index)" :key="item.brand_id" :class="index==categoryActive?'active':''"
				    v-for="(item,index) in categoryList" >
					{{item.brand_name}}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
				<view :id="index===0?'first':''" class="nav-right-item" v-for="(item,index) in subCategoryList" :key="index" @tap="toDetail(item.goods_id, item.one_class_id)">
					<image :src="item.goods_thumbnail_image" />
					<view>{{item.goods_name}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getGoodsBrand, getBrandGoodsList } from '../../../common/api.js'
	import { showError} from '../../../common/fast.js'
	export default {
		data() {
			return {
				categoryList: [],
				subCategoryList: [],
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollHeight: 0,
			}
		},
		methods: {
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(categroy, index) {
				this.categoryActive = index;
				let reqData = {
					brand_id: categroy.brand_id
				}
				getBrandGoodsList(reqData).then(res => {
					let resData = res.data
					this.subCategoryList = resData.result
					console.log(this.subCategoryList)
					
				})
				this.scrollTop = -this.scrollHeight * index;
			},
			getCategory() {
				getGoodsBrand().then(res => {
					let resData = res.data
					this.categoryList = resData.result
				})
			},
			toDetail(goods_id, class_id){
				uni.navigateTo({
					url: '../../goodsDetail?goods_id=' + goods_id + '&class_id=' + class_id
				});
			}
		},
		onLoad: function () {
			this.getCategory();
			this.height = uni.getSystemInfoSync().windowHeight;
		}
	}
</script>

<style>
	.page-body {
		display: flex;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 30%;
	}

	.nav-left-item {
		height: 100upx;
		border-right: solid 1px #E0E0E0;
		border-bottom: solid 1px #E0E0E0;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-right {
		width: 70%;
	}

	.nav-right-item {
		width: 28%;
		height: 220upx;
		float: left;
		text-align: center;
		padding: 11upx;
		font-size: 28upx;
	}

	.nav-right-item image {
		width: 100upx;
		height: 100upx;
	}

	.active {
		color: #007AFF;
	}
</style>
